<template>
  <div class="" v-loading="loading">
    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
      <el-table-column label="工艺段" prop="sectionName" />
      <el-table-column label="班组" prop="workGroupName">
        <template #default="scope">
          <el-link type="primary" @click="handleClassInfoDetail(scope.row)">
            {{ scope.row?.workGroupName || "-" }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="班长" prop="monitorName" />
      <el-table-column label="开始生产时间" prop="startProdTime" />
      <el-table-column label="结束生产时间" prop="endProdTime" />
      <el-table-column label="计划停机时长(小时)" prop="planShutdownDuration" />
      <el-table-column label="报工产量(米)" prop="outputQyt">
        <template #default="scope">
          <!-- 为了判断当前的上一班信息为空时，就是判断当前是否有id值，有则显示数据，没有则显示- -->
          <!-- 有上一班数据时，但是后端返回对应字段为null时，所以还需要再判断对应值 -->
          <span v-if="scope.row.id">
            <span v-if="scope.row.outputQyt || scope.row.outputQyt == 0">
              {{ scope.row.outputQyt }}
            </span>
            <span v-else>-</span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="有效数量(米)" prop="effectiveQyt">
        <template #default="scope">
          <!-- 为了判断当前的上一班信息为空时，就是判断当前是否有id值，有则显示数据，没有则显示- -->
          <!-- 有上一班数据时，但是后端返回对应字段为null时，所以还需要再判断对应值 -->
          <span v-if="scope.row.id">
            <span v-if="scope.row.effectiveQyt || scope.row.effectiveQyt == 0">
              {{ scope.row.effectiveQyt }}
            </span>
            <span v-else>-</span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="损耗(米)" prop="loss">
        <template #default="scope">
          <!-- 为了判断当前的上一班信息为空时，就是判断当前是否有id值，有则显示数据，没有则显示- -->
          <!-- 有上一班数据时，但是后端返回对应字段为null时，所以还需要再判断对应值 -->
          <span v-if="scope.row.id">
            <span v-if="scope.row.loss || scope.row.loss == 0">
              {{ scope.row.loss }}
            </span>
            <span v-else>-</span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="投产比" prop="inputProdRate">
        <template #default="scope">
          <!-- 为了判断当前的上一班信息为空时，就是判断当前是否有id值，有则显示数据，没有则显示- -->
          <!-- 有上一班数据时，但是后端返回对应字段为null时，所以还需要再判断对应值 -->
          <span v-if="scope.row.id">
            <span v-if="scope.row.inputProdRate || scope.row.inputProdRate == 0">
              {{ scope.row.inputProdRate }}%
            </span>
            <span v-else>-</span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="Data">
import { ref, toRefs, onMounted, watch } from "vue";
const tableData = ref([]);
const prodIndexType = ref("");
const loading = ref(false);
const props = defineProps(["datas"]);
const { datas } = toRefs(props);
const emit = defineEmits(["handleClickPrevious"]);
watch(
  datas,
  (val) => {
    console.log(val, "====val");
    if (val?.prodIndexType && val?.previousClassInfo && val.previousClassInfo?.length) {
      // 根据工段类型的不同，提供不同的表头
      prodIndexType.value = val?.prodIndexType || "";
      tableData.value = val.previousClassInfo;
      if (val.previousClassInfo && val.previousClassInfo?.length) {
        // 1.铸膜
        if (prodIndexType.value == "1") {
          // val?.prodIndexCastFilmDto放前面是因为需要拿到tableData的id，
          // 如果放后面的话，val?.prodIndexCastFilmDto会覆盖掉tableData.value[0]里面的数据
          // id是在页面点击列表班组时，获取到id，从而查询上一班信息
          tableData.value[0] = Object.assign(
            tableData.value[0]?.prodIndexCastFilmDto || {},
            tableData.value[0]
          );
        }
        // 2.卷膜
        if (prodIndexType.value == "2") {
          tableData.value[0] = Object.assign(
            tableData.value[0]?.prodIndexRollDto || {},
            tableData.value[0]
          );
        }
        // 3.水汽
        if (prodIndexType.value == "3") {
          tableData.value[0] = Object.assign(
            tableData.value[0]?.prodIndexWaterVaporDto || {},
            tableData.value[0]
          );
        }
      }
    } else {
      let _newArr = val.previousClassInfo;
      let _previousClassInfo = [];
      for (let i in _newArr) {
        // 1.铸膜
        if (_newArr[i].prodIndexType == "1") {
          // val?.prodIndexCastFilmDto放前面是因为需要拿到tableData的id，
          // 如果放后面的话，val?.prodIndexCastFilmDto会覆盖掉tableData.value[0]里面的数据
          // id是在页面点击列表班组时，获取到id，从而查询上一班信息
          _previousClassInfo.push(
            Object.assign(_newArr[i]?.prodIndexCastFilmDto || {}, _newArr[i])
          );
        }
        // 2.卷膜
        if (_newArr[i].prodIndexType == "2") {
          _previousClassInfo.push(Object.assign(_newArr[i]?.prodIndexRollDto || {}, _newArr[i]));
        }
        // 3.水汽
        if (_newArr[i].prodIndexType == "3") {
          _previousClassInfo.push(
            Object.assign(_newArr[i]?.prodIndexWaterVaporDto || {}, _newArr[i])
          );
        }
      }
      tableData.value = _previousClassInfo;
    }
  }
  // { immediate: true, deep: true }
);

function handleClassInfoDetail(row) {
  console.log(row, "===row");
  emit("handleClickPrevious", row);
}

onMounted(async () => {});
</script>
<style lang="scss" scoped></style>
